<template>
<div class="cmt-container">
    <h3>发表评论</h3>
    <hr>
    <textarea placeholder="请输入要BB的内容(最多吐槽120字)" maxlength="120" v-model="msg">

    </textarea>

    <mt-button type="primary" size="large" @click="postComment" style="padding-top:9px;">发表评论</mt-button>
    <div class="cmt-list">
         <div class="cmt-item" v-for="(item,i) in comments" :key="item.user_name">
            <div class="cmt-title">第{{i+1}}楼&nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间:{{item.add_time | dateFormat}}</div>
            <div class="cmt-body">
                {{item.content === 'undefined' ? '很懒不想说':item.content}}
            </div>
        </div>
        <div class="cmt-item">
            <div class="cmt-title">第10楼&nbsp;&nbsp;用户:匿名用户&nbsp;&nbsp;发表时间:2020-02-15 14:50:15</div>
            <div class="cmt-body">
                顶你个肺！
            </div>
        </div>
    </div>
    <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
</div>
</template>

<script>
import {Toast} from "mint-ui"
export default {
    data(){
        return {
            pageIndex:1,
            comments:[],
            msg:"",
        }
    },
    created(){
        this.getComments();
    },
    methods:{
        getComments(){
            this.$http.get("getcomments/" + this.id + "-" + this.pageIndex).then(result =>{ //"http://127.0.0.1/getcomments/:id?pageindex=1" 目前还不会往json里传参,无法做到 
                if(result.body.status === 0){
                    this.comments = this.comments.concat(result.body.message);//当点击加载更多是会将之前的评论拼接新的评论，而不是覆盖
                }else{
                    Toast("获取评论失败!");
                }
            },() =>{Toast("没有更多了!");}      //设置了请求失败的回调
            );
        },
        getMore(){
            this.pageIndex++;
            this.getComments();

        },
        postComment(){
            if(this.msg.trim().length === 0){
                return Toast("评论内容不能为空!")
            }
            this.$http.get("postcomment/" + this.$route.params.id)//this.$http.post("http://localhost:3000/postcomment/" + this.$route.params.id,{"content":this.msg.trim()})
            .then(result => {                                                   //这里本来用post方法传参，然后返回数据。json-server似乎号不能实现返回，我也不会用post，所以这个功能我就改为get，太难了我！
                if(result.body.status === 0 ){
                    var cmt = {
                        user_name:"postMan"+(Math.floor(Math.random()*1000)),
                        add_time:Date.now(),
                        content:this.msg.trim(),
                    };
                    this.comments.unshift(cmt);
                    this.msg = "";
                }
            })
        }               //加载更多功能,我在配置接口只提供了三页。按多了会出bug.
    },
    props:["id"]
}
</script>

<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size:18px;
    }
    textarea{
        font-size:14px;
        height:85px;
        margin:0;
    }
    .cmt-list{
        margin:10px 0;
        .cmt-item{
             font-size:13px;
            .cmt-title{
               line-height:30px;
               background-color:#ccc;
            }
            .cmt-body{
               line-height:35px;
                text-indent:2em
            }
        }
    }
}
</style>